<!-- 待办公文 -->
<template>
	<div id="Document">
		<div class="content">
			<ul v-infinite-scroll="loadMore"
			  	infinite-scroll-disabled="loading"
			 	infinite-scroll-distance="10"  >
				<li class="list" v-if="isAllLoad" v-for="(list,index) in documentList" :key="index" @click="toApp('DocumentWaitList')">
					<div class="icon"><i class="iconfont icon-gongwen"></i></div><div class="document-data">
						<div class="title">{{ list.customfilter10 }}</div>
						<div class="data-center">
							<div class="type">类型：
								<span v-if="list.customfilter02==1">上级来文</span>
								<span v-else-if="list.customfilter02==2">发文签批</span>
								<span v-else-if="list.customfilter02==3">本级发文</span>
								<span v-else-if="list.customfilter02==4">安委会督</span>
							
							</div><div class="time">时间：<span>{{ list.documenttime }} </span></div>
						</div>
						<div class="data-bottom">
							<div class="node">当前节点：<span>{{list.nodeName}}</span>
							</div><div class="people">发送人：<span>{{ list.sendusername }}</span></div>
						</div>
					</div>
					<div class="tib"><span>&nbsp;待办</span></div>
				</li>
				<!--底部判断是加载图标还是提示“全部加载”-->
				<div class="more_loading" v-show="!queryLoading">
					<mt-spinner type="snake" color="#00ccff" :size="20" v-show=" loading && !allLoaded">加载中</mt-spinner>
					<span v-show="allLoaded">全部加载</span>
				</div>
				<li class="nocourse" v-if="nodata && isAllLoad"><i class="iconfont icon-zanwu"></i><p>暂无数据</p></li>
			</ul>
		</div>
	</div>
</template>

<script>
	
	import verify from '@/assets/js/verificationMixin'
	import { mapState, mapMutations } from 'vuex'
	export default {
		name:'Document',
  		mixins:[verify],
		data(){
			return {
				phone:this.$route.query.phone,
				nodata:false,
				isAllLoad:false,
				page  : 0,
				loading:false,
				allLoaded:false,
				queryLoading: false,
				pageSize:5,
				keyword:'',
				show:false,
				//测试数据
				documentList : [], 
			}
		},
		computed: {
			...mapState(['userPhone']),
		},
		methods:{
			...mapMutations([
            	'toApp',
            	'changrTel',
	        ]),
			inputSearch(){
				let _self=this;
				if(_self.keyword.length>0){
					_self.show=true;
				}else{
					_self.show=false;
				}
			},
			loadMore() {
				let _self=this;
				if(_self.allLoaded){
				    _self.loading = true;
				    return;
			    }
			    if(_self.queryLoading){
			    	return;
			    }
			    _self.loading = !_self.queryLoading;
				// _self.statisticsList=[];
				_self.page++;
				_self.getFirstStudent();
			},
			// 获取一级学员
			getFirstStudent(){
				let _self=this;
				let uri = 	'sysmngajax/flow!queryFlowWaitList4Main.action';
				_self.$_get(uri, { 
		  			'FlowBin.waitSource'    :'DOCUMENT_INFO',
					'FlowBin.flowNodeStep'  :'DEAL_WAIT',
			      	'page'         :_self.page,
					'rows'         :_self.pageSize,
					'userPhone'    :_self.phone,
		  		})
		  		.then(function(res) {
		  			let data = res;
					_self.isAllLoad = true;
		  			if(data.gridModel.length>0){
		  				_self.documentList=_self.documentList.concat(data.gridModel);
		  			}
		             console.log(_self.documentList);
		             if(_self.page==1 && data.gridModel.length==0){
						_self.nodata = true;
						_self.queryLoading =true;
						_self.loading = true;
					}else{
						_self.nodata = false;
						if(data.gridModel.length > 0){
							_self.loading = false;
							_self.queryLoading =false;
							if(data.gridModel.length < _self.pageSize){
								_self.allLoaded = true;
							}
						}else if(data.gridModel.length == 0){
							_self.loading = true;
							_self.allLoaded = true;
						}
					}
					_self.$forceUpdate();
		  		})
			},
		},
		mounted(){
			this.$_verifyConfig();
			dd.ready(function(){
		        dd.biz.navigation.setTitle({
		            title: '公文办理',//标题
		            onSuccess : function(result) {},
		            onFail : function() {}
		        });
		    })
		}
	}
</script>
<style lang="less">
	#Document{
		background: #f5f5f5;
		width: 100%;
		height: 100%;
		max-width: 10rem;
		padding: 0 30px;
		.header{
			height: 100px;
			width: 100%;
			display: flex;
			align-items:flex-end;
			box-sizing: border-box;
			position: absolute;
			top: 0;
			left: 0;
			padding: 20px 30px;
			background: #fff;
			>i.iconfont{
				flex-grow:1;
				display: inline-block;
				height: 60px;
				line-height: 60px;
				text-align: left;
				font-size: 40px;
			}
			>.input{
				flex-grow:16;
				height: 10px;
				display: inline-block;
				border-bottom: 1px solid #999;
				border-left: 1px solid #999;
				border-right: 1px solid #999;
				position: relative;
				input{
					width: 100%;
					height: 60px;
					position: absolute;
					top: -50px;
					left: 0;
					padding-left: 10px;
					box-sizing: border-box;
				}
				.search{
					position: absolute;
					top: -50px;
					right: 12px;
					display: inline-block;
					width: 60px;
					height: 50px;
					/*background: #4c97fd;*/
					color: #4c97fd;
					border-radius: 10px;
					line-height: 60px;
				}
			}
		}
		.content{
			width: 100%;
			height: 100%;
			overflow-y: scroll;
			padding-top: 20px;
			ul{
				width: 100%;
				.list{
					width: 100%;
					background: #fff;
					margin-bottom: 20px;
					padding: 20px;
					box-sizing: border-box;
					border-radius: 6px;
					position: relative;
					.icon{
						width: 8%;
						display: inline-block;
						vertical-align: top;
						line-height: 62px;
						text-align: left;
						.iconfont{
							font-size: 36px;
							color: #4c97fd;
						}
					}
					.document-data{
						text-align: left;
						width: 92%;
						display: inline-block;
						vertical-align: top;
						.title{
							color: #222;
							font-weight: 600;
							font-size: 28px;
							line-height: 50px;
							margin-bottom: 10px;
						}
						.data-center{
							width: 100%;
							color: #999;
							font-size: 24px;
							margin-bottom: 5px;
							>div{
								display: inline-block;
								width: 50%;
								white-space: nowrap;
								overflow:hidden;
								text-overflow: ellipsis;
								>span{
									color: #333;
								}
							}
						}
						.data-bottom{
							width: 100%;
							color: #999;
							font-size: 24px;
							>div{
								display: inline-block;
								width: 50%;
								white-space: nowrap;
								overflow:hidden;
								text-overflow: ellipsis;
								>span{
									color: #333;
								}
							}
						}
					}
					.tib{
						position: absolute;
						right: 0;
						bottom: 0;
						color: #fff;
						width: 0px;
						height: 0px;
						border-width: 40px;
						border-style: solid;
						border-color: transparent #a1beff #a1beff transparent;
						span{
							font-size: 20px;
							white-space: nowrap;
							margin-left: -10px;
						}
					}
				}
			}
		}
		.nocourse{
			margin-top: 200px;
			.iconfont{
				font-size: 180px;
				color: #999;
			}
			p{
				color: #999;
				font-size: 22px;
				line-height: 80px;
			}
		}
	}
</style>